<template>
  <div class="not-found-container">
    <div class="error-info">
      <div class="error-code">404</div>
      <h2 class="error-title">页面不存在</h2>
      <p class="error-desc">您访问的培训资源或功能页面不存在<br>可能是资源已过期、被移除或访问路径错误</p>

      <div class="action-buttons">
        <button
            class="back-btn"
            @click="pushHome"
        >
          返回培训首页
        </button>
        <button
            class="back-btn"
            @click="pushLogin()"
        >
          去登录
        </button>
<!--        <button-->
<!--            class="help-btn"-->
<!--            @click="$router.push('/help')"-->
<!--        >-->
<!--          查看帮助中心-->
<!--        </button>-->
      </div>
    </div>
  </div>
</template>

<script lang=ts setup>
import router from "@/router/index.js";
import {ElMessage} from "element-plus";
const pushHome = () => {
  ElMessage({
    message: '正在前往首页',
    type: 'warning',
  })
  router.push('/')
}

const pushLogin = () => {
  ElMessage({
    message: '正在前往登录页',
    type: 'warning',
  })
  router.push('/login')
}
</script>

<style scoped>
.not-found-container {
  min-height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF5F5;
  padding: 20px;
}

.error-info {
  text-align: center;
  position: relative;
  padding: 40px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.error-code {
  font-size: 80px;
  font-weight: bold;
  color: #6B46C1;
  margin: 0 0 20px;
}

.error-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 16px;
}

.error-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 30px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
}

.back-btn {
  background-color: #6B46C1;
  color: white;
  border: none;
  padding: 5px 8px;
  border-radius: 4px;
}

.back-btn:hover {
  background-color: #553C9A;
}

body{
  margin: 0;
}
</style>